<template>
  <div class="enterprise-center" :key="animationKey">
    <!-- 左侧导航栏 -->
    <EnterpriseSidebar />

    <!-- 右侧主内容区域 -->
    <main class="main-content">
      <!-- 页面标题 -->
      <div class="page-header">
        <h1 class="page-title">{{ $t('enterpriseAccountSettings.pageTitle') }}</h1>
      </div>

      <!-- 设置表单 -->
      <div class="settings-form">
        <el-form 
          :model="passwordForm" 
          :rules="passwordRules" 
          ref="passwordFormRef" 
          label-width="120px"
          class="password-form"
        >
          <el-form-item :label="$t('enterpriseAccountSettings.changePassword') + ':'" prop="newPassword">
            <el-input 
              v-model="passwordForm.newPassword" 
              type="password" 
              :placeholder="$t('enterpriseAccountSettings.enterNewPassword')"
              show-password
              style="width: 300px;"
            />
          </el-form-item>
          
          <el-form-item :label="$t('enterpriseAccountSettings.confirmPassword') + ':'" prop="confirmPassword">
            <el-input 
              v-model="passwordForm.confirmPassword" 
              type="password" 
              :placeholder="$t('enterpriseAccountSettings.enterConfirmPassword')"
              show-password
              style="width: 300px;"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="changePassword">{{ $t('enterpriseAccountSettings.changePasswordBtn') }}</el-button>
            <el-button @click="resetForm">{{ $t('enterpriseAccountSettings.reset') }}</el-button>
          </el-form-item>
        </el-form>

        <!-- 退出登录按钮 -->
        <div class="logout-section">
          <el-button 
            type="danger" 
            size="large" 
            @click="logout"
            style="width: 200px;"
          >
            {{ $t('enterpriseAccountSettings.logout') }}
          </el-button>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { 
  ArrowUp, ArrowDown, House, Document, List, Message, Setting 
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import EnterpriseSidebar from '@/components/EnterpriseSidebar.vue'

const router = useRouter()

// 国际化
const { t, locale } = useI18n()

// 强制重新渲染的key
const animationKey = ref(0)

// 表单数据
const passwordForm = reactive({
  newPassword: '',
  confirmPassword: ''
})

// 表单验证规则 - 移除自动验证，避免警告
const passwordRules = {}

// 手动验证函数
const validatePassword = () => {
  const errors = []
  
  if (!passwordForm.newPassword) {
    errors.push(t('enterpriseAccountSettings.enterNewPasswordError'))
  } else if (passwordForm.newPassword.length < 6) {
    errors.push(t('enterpriseAccountSettings.passwordLengthError'))
  } else if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(passwordForm.newPassword)) {
    errors.push(t('enterpriseAccountSettings.passwordComplexityError'))
  }
  
  if (!passwordForm.confirmPassword) {
    errors.push(t('enterpriseAccountSettings.confirmPasswordError'))
  } else if (passwordForm.newPassword !== passwordForm.confirmPassword) {
    errors.push(t('enterpriseAccountSettings.passwordMismatchError'))
  }
  
  return errors
}

const passwordFormRef = ref()

// 导航方法
const goToHome = () => {
  router.push({ name: 'enterprise-home' })
}

const goToCreateDemand = () => {
  router.push({ name: 'enterprise-space' })
}

const goToApplicationRecords = () => {
  router.push({ name: 'enterprise-application-records' })
}

const goToMessages = () => {
  router.push({ name: 'enterprise-messages' })
}

const goToSettings = () => {
  // 当前页面，不需要跳转
}

// 修改密码
const changePassword = async () => {
  try {
    // 使用手动验证
    const errors = validatePassword()
    
    if (errors.length > 0) {
      ElMessage.warning(errors[0])
      return
    }
    
    // 验证通过，这里可以调用API修改密码
    ElMessage.success(t('enterpriseAccountSettings.passwordChangeSuccess'))
    
    // 清空表单
    passwordForm.newPassword = ''
    passwordForm.confirmPassword = ''
    
  } catch (error) {
    ElMessage.error(t('enterpriseAccountSettings.checkFormError'))
  }
}

// 重置表单
const resetForm = () => {
  // 清空表单数据
  passwordForm.newPassword = ''
  passwordForm.confirmPassword = ''
  ElMessage.info(t('enterpriseAccountSettings.formReset'))
}

// 退出登录
const logout = () => {
  ElMessageBox.confirm(t('enterpriseAccountSettings.confirmLogout'), t('enterpriseAccountSettings.tip'), {
    confirmButtonText: t('common.confirm'),
    cancelButtonText: t('common.cancel'),
    type: 'warning'
  }).then(() => {
    // 清除本地存储的用户信息
    localStorage.removeItem('userType')
    localStorage.removeItem('token')
    localStorage.removeItem('userInfo')
    
    // 跳转到登录页面
    router.push({ name: 'qiyedenglu' })
    
    ElMessage.success(t('enterpriseAccountSettings.logoutSuccess'))
  })
}

// 语言初始化
const initLanguage = () => {
  const savedLang = localStorage.getItem('lang')
  if (savedLang && ['zh', 'en'].includes(savedLang)) {
    locale.value = savedLang
  }
}

// 语言变化事件处理
const handleLanguageChange = (event) => {
  const { language } = event.detail
  // 强制重新渲染组件以更新语言
  animationKey.value++
}

// 组件挂载
onMounted(() => {
  // 初始化语言设置
  initLanguage()
  
  // 监听语言变化事件
  window.addEventListener('languageChanged', handleLanguageChange)
})

// 组件卸载时清理事件监听器
onUnmounted(() => {
  window.removeEventListener('languageChanged', handleLanguageChange)
})
</script>

<style scoped>
.enterprise-center {
  display: flex;
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 左侧导航栏 */
.sidebar {
  width: 280px;
  background-color: #f8f9fa;
  border-right: 1px solid #e9ecef;
  display: flex;
  flex-direction: column;
}

.company-info {
  padding: 20px;
  border-bottom: 1px solid #e9ecef;
}

.company-logo {
  margin-bottom: 15px;
}

.logo-square {
  width: 40px;
  height: 40px;
  background-color: #1976d2;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
  border-radius: 4px;
}

.company-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.company-id {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #666;
}

.id-controls {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.navigation-menu {
  flex: 1;
  padding: 20px 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  color: #666;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

.nav-item:hover {
  background-color: #e9ecef;
  color: #333;
}

.nav-item.active {
  background-color: #e3f2fd;
  color: #1976d2;
  border-left-color: #1976d2;
  font-weight: 500;
}

.nav-item span {
  flex: 1;
}

/* 右侧主内容区域 */
.main-content {
  flex: 1;
  padding: 30px;
  background-color: white;
}

.page-header {
  margin-bottom: 40px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

/* 设置表单 */
.settings-form {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.password-form {
  width: 100%;
  margin-bottom: 60px;
  padding: 30px;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
}

.logout-section {
  display: flex;
  justify-content: center;
  padding: 20px 0;
  width: 100%;
}

/* Element Plus 组件样式调整 */
:deep(.el-form-item__label) {
  font-weight: 500;
  color: #333;
}

:deep(.el-input__wrapper) {
  border-radius: 4px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .enterprise-center {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #e9ecef;
  }
  
  .main-content {
    padding: 20px;
  }
  
  .password-form {
    padding: 20px;
  }
  
  :deep(.el-input) {
    width: 100% !important;
  }
}
</style> 